<template>
  <div id="home">
    <StepBackwardFilled />
    <ByButton
      @click="alter"
    >
     message
    </ByButton>
     <ByButton
      @click="alter1"
    >
      notification
    </ByButton>
     <ByButton
      @click="addMu"
    >
      添加一首歌
    </ByButton>
     <ByButton
      @click="removeMu"
    >
      删除第三首歌
    </ByButton>
     <ByButton
      @click="searchMu"
    >
      搜索第二首歌
    </ByButton>
    <ByButton
      @click="show=!show"
    >
      show
    </ByButton>
    <div id="mytest"></div>
    <div id="mytest1"></div>
    <div style="height:1000px;widht:100%;"></div>
    <ByImage v-for="(item,index) of srcList" :key="index" @click="imageShow(item)" :src="item" @load="al" :offset="-100" fit="cover" :lazy="true" style="width:100px;height:100px"/>
    <ByImageView v-model:show="show" :urlList="srcList" :url="url"/>
    <ByBackTop :visibilityHeight="100" >
      <div class="back-top-inner">
        UP
      </div>
    </ByBackTop>
    <!-- <Music/> -->
  </div>
</template>

<script>
// @ is an alias to /src
import { StepBackwardFilled } from "@ant-design/icons-vue";
import ByButton from "../components/button/button";
import ByBackTop from "../components/back-top/backTop";
import ByImage from "../components/image/image";
import ByImageView from "../components/image/image-view";
import message from "../components/message/index";
import notification from "../components/notification/index";
// import {h}  from "vue";
// import test from './test';
import ByMusic  from "../components/music/index.js";

export default {
  name: "Home",
  components: {
    ByButton,
    ByBackTop,
    ByImage,
    ByImageView,
    StepBackwardFilled,
  },
  data() {
    return {
      test: 50,
      res: false,
      show:false,
      index:1,
       url: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        srcList: [
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://p.pstatp.com/origin/1375700020d021cb4809c'
        ]
    };
  },
  methods: {
    al(e) {
      console.log("=================================",e);
    },
    imageShow(url){
      this.url=url
      this.show=true
    },
    alter() {
      message.loading({
        content: "This is a normal message",
        duration: 3,
      });
       message.success({
        content: "This is a normal message",
        duration: 3,
      });
      message.warning({
        content: "This is a normal message",
        duration: 3,
      });
      message.error({
        content: "This is a normal message",
        duration: 3,
      });
    },
    alter1() {
      notification.config({maxCount:2})
      notification.loading({
        message: "Notification Title",
        description:
          "This is the content of the notification. This is the content of the notification. This is the content of the notification.",
        placement: "topLeft",
        btn:StepBackwardFilled,
      });
      notification.error({
        message: "Notification Title",
        description:
          "This is the content of the notification. This is the content of the notification. This is the content of the notification.",
        placement: "bottomLeft",
        btn:StepBackwardFilled,
      });
      notification.warning({
        message: "Notification Title",
        description:
          "This is the content of the notification. This is the content of the notification. This is the content of the notification.",
        placement: "topRight",
         duration: 0,
        btn:StepBackwardFilled,
      });
      notification.success({
        message: "Notification Title",
        description:
          "This is the content of the notification. This is the content of the notification. This is the content of the notification.",
        placement: "bottomRight",
        btn:StepBackwardFilled,
      });
    },
    addMu(){
      ByMusic.addMusic([{
            name:'云墨白音乐播放器',
            artist:'Baymax',
            url:"https://api.i-meto.com/meting/api?server=netease&type=url&id=1372312136&auth=2af580475fb56aef513635a5e3c6e6acc7961366",
            cover:
              "https://api.i-meto.com/meting/api?server=netease&type=pic&id=109951163063577915&auth=03744d420ab12e4a0512adf00bdb58b649fcdb35",
            lrcUrl:
              "https://api.i-meto.com/meting/api?server=netease&type=lrc&id=1372312136&auth=fc4b53dfeb734e67b84bb4dab6d3ff24c983f599",
            lrc:''
      }])
       message.success({
          content: "添加成功",
          duration: 3,
      });
    },
    removeMu(){
      const boo=ByMusic.removeMusic(2)
      if(boo){
        message.success({
          content: "删除成功",
          duration: 3,
        });
      }else{
           message.error({
            content: "删除失败",
            duration: 3,
          });
      }
    },
    searchMu(){
      const info=ByMusic.searchMusic(this.index)
      console.log(info)
      const key=notification.success({
        message: "搜索成功------点击播放",
        description:`${info.name}------${info.artist}`,
        duration:10,
        icon:<img src={`${info.cover}`} width="60" style="position: absolute;width: 40px;"/>,
        onClick:()=>{
          console.log(this.index)
          ByMusic.jump(info.index)
          ByMusic.autoPlay=true
          notification.close(key)
        }
      });
      this.index++
    },

    addMusic(){
      //  this.$nextTick(function() {
          ByMusic.showMode('list',true)
      //  })
    }
  },
  // created(){
  //   this.addMusic()
  // },
  setup(){
    ByMusic.showMode('list',true)
    // ByMusic.showMode('details',true)
  },
  unmounted(){
    ByMusic.showMode('list',false)
    // ByMusic.showMode('details',false)
  }
};
</script>
<style lang="stylus" scoped>
 .back-top {
  bottom: 100px;
}
.back-top-inner {
  height: 40px;
  width: 40px;
  line-height: 40px;
  border-radius: 4px;
  background-color: #1088e9;
  color: #fff;
  text-align: center;
  font-size: 20px;
}
</style>